<template>
  <div id="hone">
    <van-nav-bar title="我的收藏" left-text="返回" right-text="编辑" left-arrow @click-left="onClickLeft"
      @click-right="tbxx = !tbxx" />

    <p v-if="shoucs.length === 0" style="text-align: center;
    margin-top: 40rem;">没有收藏的商品</p>

    <div v-else class="scboxs">

      <div v-for="(item, index) in shoucs" :key="item.id" class="scbox">
        <van-image width="100%" height="230rem" fit="cover" :src="item.img" />
        <div>
          <p>{{ item.name }}</p>
          <p class="jiage">￥{{ item.price }}</p>
          <div @click="removeFromFavorites(item.id)" class="scbox-del" v-if="tbxx">
            <van-icon name="delete-o" />
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { scgn } from '../stores/shouc';

const shoucStore = scgn();
const tbxx = ref(false);

const onClickLeft = () => history.back();


// 使用计算属性访问 shoucs
const shoucs = computed(() => shoucStore.shoucs);

// 页面加载时从本地存储加载收藏数据
onMounted(() => {
  shoucStore.loadFromLocalStorage();
});

// 移除商品的收藏
const removeFromFavorites = (id: string) => {
  shoucStore.removeFromFavorites(id);
};
</script>


<style scoped lang="less">
.scboxs {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .scbox {
    width: 173rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 5rem;
    border: 1rem solid none;
    border-radius: 10rem;
    background-color: white;
    position: relative;

    img {
      width: 100%;

    }

    p {
      //最多2行
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      width: 100%;
      font-size: 13rem;
      margin-top: 5rem;
      margin-bottom: 5rem;
    }

    .jiage {
      color: #ff0000;
      font-size: 15rem;
      margin-top: 5rem;
    }

    .scbox-del {
      position: absolute;
      top: 5rem;
      right: 5rem;
      color: #fff;
      font-size: 17rem;
    }
  }
}
</style>